{% load i18n static %}

<script type="text/x-template" id="suit-academy-tables">
  <div>
    <a-page-header title="学院列表"></a-page-header>
    <a-list itemLayout="vertical" size="large" :dataSource="academies">
      <a-list-item slot="renderItem" slot-scope="item, index" key="item.uuid">
        <template v-if="!loading" slot="actions" v-for="{type, text, key} in actions">
          <span :key="type">
            <a-icon :type="type" style="margin-right: 8px"></a-icon>
            <span v-if="key === 'aca_code'"><% text %>: <% item.aca_code %></span>
            <span v-if="key === 'aca_phone'"><% text %>: <% item.aca_phone %></span>
            <span v-if="key === 'aca_fax'"><% text %>: <% item.aca_fax %></span>
            <a v-if="key === 'aca_href'" :href="item.aca_href" target="_blank"><% text %>: <% item.aca_href %></a>
          </span>
        </template>
        <a-skeleton :loading="loading" active avatar>
          <a-list-item-meta :description="item.aca_brief">
            <a slot="title" :href="`{% url "colleges:academy-detail" %}?pk=${item.uuid}&name=${item.aca_cname}`"><% item.aca_cname %> | <% item.aca_ename %></a>
            <a-avatar shape="square" size="large" slot="avatar" :src="item.aca_avatar"></a-avatar>
          </a-list-item-meta>
          <% item.content %>
        </a-skeleton>
      </a-list-item>
    </a-list>
  </div>
</script>

<script type="application/javascript">
    Vue.component('suit-academy-tables', {
      delimiters: ['<%', '%>'],
      template: '#suit-academy-tables',
      data: function () {
        return {
          loading: true,
          academies: [{}],
          actions: [
            { type: 'code-o', text: '编码', key: 'aca_code' },
            { type: 'phone-o', text: '电话', key: 'aca_phone' },
            { type: 'paper-clip', text: '邮编', key: 'aca_fax' },
            { type: 'link', text: '网址', key: 'aca_href' }
          ],
        }
      },
      created: function () {
        this.getCollegesInfors();
      },
      methods: {
        getCollegesInfors () {
          axios({
            url: "{% url 'api-colleges:academies' %}",
            method: "GET",
            headers: {
              'X-CSRFTOKEN': window.csrftoken
            }
          }).then(response => {
            const {code, data} = response.data;
            if (code === "00000000") {
              this.academies = data;
            }
            this.loading = !this.loading;
          }).catch(error => {
            console.log(error);
          });
        }
      }
    });
</script>